<script setup lang="ts">
// import { format } from 'date-fns'
import dayjs from 'dayjs';

// const date = ref(new Date())
const date = ref<string | null>(null)
const router = useRouter()
const isSubmit = ref(false)
const handleDate = (selectData: Date | string) => {
  const parsed = dayjs(selectData)
  if (parsed.isValid()) {
    date.value = parsed.format('YYYY-MM-DD')
  }
}

const submitHandle = () => {
  if (!date.value) {
    isSubmit.value = true
    return
  }
  router.push({
    path: '/qifu/product',
    query: { date: date.value }
  });
}

// 关闭弹窗
const closeModal = () => {
  isSubmit.value = false
}
</script>

<template>
  <div class="w-full min-h-screen relative">
    <Header :back="'/select'"/>
    <!-- 自适应背景图 -->
    <img 
    src="/assets/images/qifu/qifuye.png" 
    alt=""
    class="w-full h-auto object-contain"
    />
    <div class="fixed right-0 top-1/2 writing-vertical transform -translate-y-1/2 z-50">
      <button @click="router.push('orders')"
        class="rounded-l-lg bg-black/60 text-white px-2 py-1 hover:bg-gray-800 transition"
      >
        查看订单
      </button>
    </div>
    <!-- 图片放置在背景图内 -->
    <div class="absolute w-full bottom-[8%]">
      <div class="w-full flex flex-col justify-center gap-10">
        <div class="relative flex flex-col justify-center">
          <div class="flex justify-center">
            <img 
              src="/assets/images/qifu/border.png" 
              alt=""
              class="w-[350px] object-contain"
            />
          </div>
          <!-- 放置文字 -->
          <div class="absolute w-full text-center left-0 right-0 mx-auto flex flex-col justify-center top-[30%] text-white text-base font-bold">
              <span>初一和十五为最佳祈福日，</span>
              <span>优先推荐考虑</span>
          </div>
        </div>
        <!-- 按钮放置在图片下方 -->
        <div class="w-full flex justify-center z-10">
            <button class="animate-scale w-[150px] md:w-[170px] cursor-pointer opacity-90 hover:opacity-100 transition-opacity" @click="submitHandle">
                <img 
                src="/assets/images/qifu/button.png" 
                alt=""
                />
            </button>
        </div>
      </div>
    </div>
    
    <!-- 日期选择器 -->
    <div class="absolute inset-0 top-[15%] flex justify-center">
      <DatePicker :model-value="date" class="!w-4/5" @date-sent="handleDate"/>
    </div>
    <TipModal
      v-model="isSubmit"
      title="提示"
      message="请选择时间"
      @close="closeModal"
    />
  </div>
</template>
<style scoped>
@keyframes scaleAnimation {
  0% { transform: scale(0.8); }
  50% { transform: scale(1); }
  100% { transform: scale(0.8); }
}
.animate-scale {
  animation: scaleAnimation 2s ease-in-out infinite;
}
.writing-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
</style>